@use "../../../../../styles/mixin.scss" as mixin;

.log-wrapper {
    width: 100%;
    height: 100%;
    padding: 12px;
    overflow-y: auto;
    .timeline {
        width: 100%;
        --bg-color: var(--Colors-Use-Neutral-Bg-Hover);
        --border-color: var(--Colors-Use-Neutral-Text-2-Primary);
        --border-bg-color: var(--Colors-Use-Neutral-Disable);

        &-header {
            display: flex;
            align-items: center;
            height: 16px;
            svg {
                width: 12px;
                height: 12px;
            }
        }
        &-content {
            padding: 8px 0;
            display: flex;
            flex-direction: column;
            position: relative;
            gap: 8px;
            z-index: 1;
            &::after {
                content: "";
                position: absolute;
                width: 2px;
                height: 100%;
                left: 12px;
                top: 0;
                background: var(--Colors-Use-Neutral-Disable);
            }

            .timeline-card-white {
                --bg-color: var(--Colors-Use-Neutral-Bg-Hover);
                --border-color: var(--Colors-Use-Neutral-Text-2-Primary);
                --border-bg-color: var(--Colors-Use-Neutral-Disable);
            }
            .timeline-card-danger {
                --bg-color: var(--Colors-Use-Error-Bg-Hover);
                --border-color: var(--Colors-Use-Error-Primary);
                --border-bg-color: var(--Colors-Use-Error-Border);
            }

            .timeline-card {
                width: 100%;
                border-radius: 8px;
                background: var(--bg-color);
                padding: 6px 2px 2px 2px;
                display: flex;
                flex-direction: column;
                gap: 4px;
                z-index: 1;
                &-header {
                    display: flex;
                    align-items: center;

                    &-left {
                        display: flex;
                        align-items: center;
                        flex: 1;
                        width: 0;
                        gap: 4px;
                    }
                    &-extra {
                        display: flex;
                        align-items: center;
                        margin-right: 8px;

                        .expand-icon {
                            display: inline-flex;
                            cursor: pointer;
                            transition: transform 0.25s ease;
                            svg{
                                width: 16px;
                                height: 16px;
                                color: var(--Colors-Use-Neutral-Text-3-Secondary);
                            }
                            &.expanded {
                                transform: rotate(180deg);
                            }
                        }
                    }
                    &-tag {
                        border-color: var(--Colors-Use-Neutral-Border);
                        color: var(--Colors-Use-Neutral-Text-3-Secondary);
                        @include mixin.text-ellipsis;
                        display: flex;
                        align-items: center;
                    }
                }
                p {
                    margin: 0;
                    color: var(--Colors-Use-Neutral-Text-4-Help-text);
                    font-size: 11px;
                }
                &-dot {
                    width: 8px;
                    height: 8px;
                    margin: 4px;
                    margin-left: 6px;
                    border-radius: 50%;
                    border: 1px solid var(--border-color);
                    background: var(--border-bg-color);
                }
                &-content {
                    border-radius: 6px;
                    border: 1px solid var(--Colors-Use-Neutral-Border);
                    background: var(--Colors-Use-Basic-Background);
                    padding: 4px 6px;

                }
            }
        }
    }
}

.file-description {
    color: var(--Colors-Use-Neutral-Text-1-Title);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
.file-path {
    color: var(--Colors-Use-Neutral-Text-1-Title);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
